<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天视频</title>
    <link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap/bootstrap.min.js"></script>
    <script src="../js/socket.io.js"></script>
    <script src="../js/adapter-latest.js"></script>
</head>
<body style="padding: 10px">
<form id="form" class="row col l12 s12">
    <div class="row container col l12 s12">
      <div class="col" style="min-width: 433px; max-width: 443px">
        <div class="card" style="margin-top: 0px; margin-bottom: 0px;">
          <div class="row card-content" style="margin-bottom: 0px;">
              <div class="input-field">
                <label for="appID" class="active">应用程序 ID</label>
                <input type="text" placeholder="App ID" name="appID">
              </div>
              <div class="input-field">
                <label for="channel" class="active">通道</label>
                <input type="text" placeholder="channel" name="channel">
              </div>
              <div class="input-field">
                <label for="token" class="active">令牌</label>
                <input type="text" placeholder="token" name="token">
              </div>
              <div class="row" style="margin: 0">
                <div class="col s12">
                <button class="btn btn-raised btn-primary waves-effect waves-light" id="join">加入</button>
                <button class="btn btn-raised btn-primary waves-effect waves-light" id="leave">离开</button>
                <button class="btn btn-raised btn-primary waves-effect waves-light" id="publish">发布</button>
                <button class="btn btn-raised btn-primary waves-effect waves-light" id="unpublish">取消发布</button>
                </div>
              </div>
          </div>
        </div>
        <ul class="collapsible card agora-secondary-border" style="margin-top: .4rem; border: 1px ">
          <li>
            <div class="collapsible-header agora-secondary-bg">
              <h8 class="center-align">高级设置</h8>
            </div>
            <div class="collapsible-body card-content">
              <div class="row">
                <div class="col s12">
                  <div class="input-field">
                    <label for="UID" class="active">用户ID</label>
                    <input type="number" placeholder="UID" name="uid">
                  </div>
                  <div class="input-field">
                    <label for="cameraId" class="active">相机</label>
                    <select name="cameraId" id="cameraId"></select>
                  </div>
                  <div class="input-field">
                    <label for="microphoneId" class="active">麦克风</label>
                    <select name="microphoneId" id="microphoneId"></select>
                  </div>
                  <div class="input-field">
                    <label for="cameraResolution" class="active">相机分辨率</label>
                    <select name="cameraResolution" id="cameraResolution"></select>
                  </div>
                  <div class="row col s12">
                    <div class="row">
                      <label for="mode" class="active">模式</label>
                    </div>
                    <div class="row">
                      <label>
                        <input type="radio" class="with-gap" name="mode" value="live" checked />
                        <span>live</span>
                      </label>

                      <label>
                        <input type="radio" class="with-gap" name="mode" value="rtc" />
                        <span>rtc</span>
                      </label>
                    </div>
                  </div>
                  <div class="row col s12">
                    <div class="row">
                      <label for="codec" class="active">编解码器</label>
                    </div>
                    <div class="row">
                      <label>
                        <input type="radio" class="with-gap" name="codec" value="h264" checked />
                        <span>h264</span>
                      </label>

                      <label>
                        <input type="radio" class="with-gap" name="codec" value="vp8" />
                        <span>vp8</span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
          </li>
        </ul>
      </div>
      <div class="col s7">
        <div class="video-grid" id="video">
          <div class="video-view">
            <div id="local_stream" class="video-placeholder"></div>
            <div id="local_video_info" class="video-profile hide"></div>
            <div id="video_autoplay_local" class="autoplay-fallback hide"></div>
          </div>
        </div>
      </div>
    </div>
  </form>
    <div class="col-sm-12" style="display: none;">
        <div class="col-sm-6">
            <div class="col-sm-12" style="text-align: center;">
                <label for="offer">Local：</label>
            </div>
            <textarea id="offer" style="width: 100%; height: 200px; resize:none;" disabled></textarea>
        </div>
        <div class="col-sm-6">
            <div class="col-sm-12" style="text-align: center;">
                <label for="answer">Remote：</label>
            </div>
            <textarea id="answer" style="width: 100%; height: 200px; resize:none;" disabled></textarea>
        </div>
    </div>
</div>
<script src="../js/main.js" charset="utf-8" type="text/javascript"></script>
</body>
</html>